import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { ScrollView, Text, View } from '@ray-js/ray';
import { useTemperatureUnit } from '@/hooks/useUnit';
import Strings from '@/i18n';
import CommonCharts from '@ray-js/common-charts';
import { useDevId } from '@ray-js/panel-sdk/lib/hooks';
import { useToiletTimeRange } from '../hooks/useToiletTimeRange';
import { SwitchAnalyze } from './swtichAnalyze';
import { useHumidityRange } from '../hooks/useHumidityRange';
import Styles from './analyze.module.less';
import { Tabs } from './tabs';
import { useToiletAvaTimeRange } from '../hooks/useToiletAvaTime';

const CHART_DEBUG = false; // chart的统计数据是否开启debug模式

export const Analyze = ({ current }: { current: 'toiletTime' | 'toiletVisit' }) => {
  const { deviceId } = useDevId();
  const rangeOptions = [
    { text: Strings.getLang('day'), key: 'day' },
    { text: Strings.getLang('week'), key: 'week' },
    { text: Strings.getLang('month'), key: 'month' },
    { text: Strings.getLang('year'), key: 'year' },
  ];
  const [currentRange, setCurrentRange] = useState(0);
  const [hour, setHour] = useState(Date.now());
  const [month, setMonth] = useState(Date.now());
  const [week, setWeek] = useState(Date.now());
  const [year, setYear] = useState(Date.now());
  const chartRef = useRef(null);
  const curRange = useMemo(() => rangeOptions[currentRange].key, [currentRange]) as
    | 'day'
    | 'month'
    | 'year'
    | 'week';

  const curTempDate = useMemo(() => {
    if (curRange === 'day') {
      return hour;
    }
    if (curRange === 'month') {
      return month;
    }
    if (curRange === 'year') {
      return year;
    }
    return week;
  }, [curRange, hour, month, week, year]);

  console.log(`🚀 ~ curTempDate:`, curTempDate);

  const timeResult = useToiletTimeRange({
    range: curRange,
    dpId: '7',
    deviceId,
    type: 'sum',
    date: curTempDate,
    code: 'excretion_time_day',
    debug: false,
  });

  const avaResult = useToiletAvaTimeRange({
    range: curRange,
    dpId: '8',
    deviceId,
    type: 'avg',
    date: curTempDate,
    code: 'excretion_time_day',
    debug: false,
  });

  const [option, isLoading, isEmpty, errorMsg] = current === 'toiletVisit' ? timeResult : avaResult;

  const onDateChange = useCallback(
    (date: number) => {
      if (curRange === 'day') {
        setHour(date);
      } else if (curRange === 'month') {
        setMonth(date);
      } else if (curRange === 'year') {
        setYear(date);
      } else {
        setWeek(date);
      }
    },
    [curRange, hour, month, week]
  );

  useEffect(() => {
    if (isLoading) {
      chartRef.current?.showLoading('default', { text: Strings.getLang('loading') });
    } else {
      chartRef.current?.hideLoading();
    }
  }, [isLoading]);

  return (
    <>
      <View className={Styles.analyze}>
        <Tabs current={currentRange} onChange={setCurrentRange} options={rangeOptions} />
        <View style={{ height: '456rpx', margin: '20rpx 0' }}>
          <CommonCharts
            errMsg={errorMsg}
            getEchartsProxy={echart => {
              chartRef.current = echart;
            }}
            option={option}
            opts={{ notMerge: false }}
          />
        </View>
      </View>
      <SwitchAnalyze date={curTempDate} onDateChange={onDateChange} range={curRange} />
    </>
  );
};

export default Analyze;
